<template>
  <div class='container'>
    <el-row>
      <el-col>
        <el-card>
          <div slot="header">
            <bread></bread>
          </div>

          <div class="tab-wrapper">
            <el-table
              :data="bannerList"
              style="width: 100%"
              align='center'
              :header-cell-style="{background:'#eef1f6'}"
            >

              <el-table-column
                prop="sort"
                label="排序"
                align='center'
                width="50">
              </el-table-column>
              <el-table-column
                prop="createTime"
                label="时间"
                :formatter="formatDate"
                align='center'>
              </el-table-column>
              <el-table-column
                label="位置"
                prop="position"
                :formatter="getPosition"
                align='center'>
              </el-table-column>
              <el-table-column
                prop="title"
                label="名称"
                align='center'
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                prop="imgPath"
                label="图片"
                width="200"
                align='center'>
                <template   slot-scope="scope">
                  <img :src="scope.row.imgPath"  min-width="70" height="70" />
                </template>

              </el-table-column>
              <el-table-column
                align='center'
                label="操作">
                <template slot-scope='scope'>
                  <el-button
                    type="text"
                    size="mini"
                    @click="showDialog(2, scope.row)"
                  >
                    修改
                  </el-button>
                  <el-button
                    type="text"
                    size="mini"
                    @click="showDialog(3,scope.row)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>

            </el-table>

            <div class="table-footer">
              <el-row>
                <el-col>
                  <el-button @click="showDialog(1)">
                    添加
                  </el-button>
                </el-col>
              </el-row>
            </div>
          </div>

          <!-- 删除提示框 -->
          <el-dialog title="提示" :visible.sync="delVisible" width="300px" center :modal-append-to-body="false">
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <div slot="footer" class="dialog-footer">
              <el-button @click="delVisible = false">取 消</el-button>
              <el-button type="primary" @click="deleteRow()">确 定</el-button>
            </div>
          </el-dialog>

          <!-- banner提示框 -->
          <el-dialog :visible.sync="bannerVisible" width="50%" center :modal-append-to-body="false">
            <div>
              <el-form :model="addFormParams" label-width="120px">
                <el-row>
                  <el-col>
                    <div class="dialog-title">
                      <span v-if="dialogNum == 1">添加banner</span>
                      <span v-if="dialogNum == 2">修改banner</span>
                    </div>
                  </el-col>
                  <el-col>

                    <el-form-item label="banner展示位置:">
                      <el-select v-model="addFormParams.position" placeholder="请选择" style="width:100%">
                        <el-option
                          v-for="item in positionList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                          <span style="float: left">{{ item.label }}</span>
                        </el-option>
                      </el-select>
                    </el-form-item>

                    <el-form-item label="banner排序:">
                      <el-input v-model="addFormParams.sort" size="mini" placeholder="请输入排序"></el-input>
                    </el-form-item>

                    <el-form-item label="banner类型:">
                      <el-select v-model="addFormParams.code" placeholder="请选择" style="width:100%">
                        <el-option
                          v-for="item in codeList"
                          :key="item.code"
                          :label="item.content"
                          :value="item.code">
                          <span style="float: left">{{ item.content }}</span>
                        </el-option>
                      </el-select>
                    </el-form-item>

                    <el-form-item label="banner名称:">
                      <el-input v-model="addFormParams.title" size="mini" placeholder="请输入名称"></el-input>
                    </el-form-item>

                    <el-form-item label="banner内容:">
                      <el-input v-model="addFormParams.content" size="mini" placeholder="请输入内容"></el-input>
                    </el-form-item>

                    <el-form-item label="banner参数:">
                      <el-input v-model="addFormParams.parameter" size="mini" placeholder="请输入参数"></el-input>
                    </el-form-item>
                    <!--                    <el-form-item label="跳转链接:"></el-form-item>-->
                    <el-form-item label="图片上传">
                      <el-upload
                        class="avatar-uploader"
                        action="http://www.ccppvip.com:8081/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess">
                        <img v-if="addFormParams.imgPath" :src="addFormParams.imgPath" class="avatar" width="350">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                  <el-col>
                    <el-form-item>
                      <el-button @click="closeDialog">取消</el-button>
                      <el-button v-if="num == 1" type="primary" @click="getAddAds">确定</el-button>
                      <el-button v-if="num == 2" type="primary" @click="getChangeAds">确定</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-dialog>

        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import bread from '../../common/bread'
import { formatDate } from 'src/utils/utils'
import { bannerList, addAds, changeAds, getConfigCode } from '../../api/api'

export default {

  data () {
    return {
      bannerList: [],
      codeList: [],
      delVisible: false,
      bannerVisible: false,
      dialogNum: 1,
      bannerParams: {
        pageNum: 1,
        pageSize: 10
      },
      delFormParams: {
        id: ''
      },
      addFormParams: {
        id: '',
        code: '',
        imgPath: '',
        sort: '',
        parameter: '',
        title: '',
        content: ''
      },
      formData: '',
      num: '',
      positionList: [{
        value: '1',
        label: '首页banner'
      }, {
        value: '2',
        label: '找好物'
      }, {
        value: '3',
        label: '找好店'
      }, {
        value: '4',
        label: '优选商家'
      }, {
        value: '5',
        label: '今日推荐'
      }, {
        value: '6',
        label: '新品体验'
      }, {
        value: '7',
        label: '超低优惠'
      }, {
        value: '8',
        label: '猜你喜欢'
      }]
    }
  },
  mounted () {
    this.getBannerList()
    this.getConfigCode()
  },
  methods: {
    handleAvatarSuccess (res, file) {
      this.addFormParams.imgPath = URL.createObjectURL(file.raw)
      this.addFormParams.imgPath = JSON.parse(res.slice(5)).data.split('?')[0]
      console.log(this.addFormParams.imgPath)
    },
    getBannerList () {
      const para = Object.assign({}, this.bannerParams)
      bannerList(para).then(res => {
        console.log(res)
        this.bannerList = res.data.list
      })
    },
    // 格式化表单数据
    clearForm () {
      this.addFormParams = {
        id: '',
        code: '',
        imgPath: '',
        sort: '',
        parameter: '',
        title: '',
        content: ''
      }
    },
    showDialog (num, row) {
      this.num = num
      console.log(this.num)
      if (num === 2) {
        this.bannerVisible = true
        console.log(row)
        this.addFormParams.id = row.id
        this.addFormParams.code = row.code
        this.addFormParams.imgPath = row.imgPath
        this.addFormParams.sort = row.sort
        this.addFormParams.title = row.title
        this.addFormParams.content = row.content
      } else if (num === 1) {
        this.bannerVisible = true
        this.clearForm()
      } else {
        this.delFormParams.id = row.id
        this.delVisible = true
      }
      this.dialogNum = num
    },
    closeDialog () {
      this.bannerVisible = false
      this.delVisible = false
    },
    getAddAds () {
      const para = Object.assign({}, this.addFormParams)
      addAds(para).then(res => {
        // eslint-disable-next-line eqeqeq
        if (res.code == 0) {
          this.closeDialog()
          this.getBannerList()
          this.$toast('添加成功')
        } else {
          this.$toast(res.msg)
        }
      })
    },
    getChangeAds () {
      const para = Object.assign({}, this.addFormParams)
      changeAds(para).then(res => {
        // eslint-disable-next-line eqeqeq
        if (res.code == 0) {
          this.closeDialog()
          this.getBannerList()
          this.$toast('修改成功')
        } else {
          this.$toast(res.msg)
        }
      })
    },
    getConfigCode () {
      const para = Object.assign({})
      getConfigCode(para).then(res => {
        console.log(res)
        this.codeList = res.data
      })
    },
    formatDate (row, column) {
      let date = row[column.property]
      date = new Date(date)
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    },
    delDialog (index, raw) {
      this.delParams.id = raw.id
      this.delParams.index = index
      this.delVisible = true
    },
    getPosition (row) {
      for (var i in this.positionList) {
        if (this.positionList[i].value === row.position) {
          return this.positionList[i].label
        }
      }
    },
    deleteRow () {
      const para = Object.assign({}, this.delFormParams)
      this.delBanner(para).then(res => {
        // eslint-disable-next-line eqeqeq
        if (res.code == 0) {
          this.closeDialog()
          this.getBannerList()
          this.$toast('修改成功')
        } else {
          this.$toast(res.msg)
        }
      })
    }
  },
  components: {
    bread
  }
}

</script>


<style lang='scss'>
  .container {
    .el-table {
      .warning-row {
        background-color: oldlace;
      }
    }

    .dialog-title {
      margin: 0 0 30px;
      text-align: center;
      font-size: 20px;
    }
  }
</style>
